<template>
  <div class="screenLeftTwo">
    <Title>
      <template #title>
        缴费来源渠道分析
      </template>
    </Title>
    <div class="contentBox">
      <div id="chart" ref="chartDom"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import $util from "../util/util"
import { ref, onMounted, onUnmounted, watch } from "vue"
import { PiniaStore } from '../store/index'
import { paymentBISource } from './Options/Api'
const store = PiniaStore()
interface PropsType {
  startDate?: string
  endDate?: string
  verify_code?: string
}
const props = withDefaults(defineProps<PropsType>(), {
  startDate: '',
  endDate: '',
  key: ''
})
const dataRight = ref<any>()
const getList = async () => {
  const params: any = {
    start_date: props.startDate,
    end_date: props.endDate,
    verify_code: props.verify_code,
  }
  const res: any = await paymentBISource(params)
  if (res.code !== 1) return ElMessage.error(res.msg)
  return new Promise(async (resolve) => {
    dataRight.value = res.data
    await getCharts()
    store.setLoddingStatus()
    resolve(undefined) // 所有操作完成后resolve
  })

}
const chartDom = ref<any>(null)
let myChart: any = null
const getCharts = async () => {
  myChart = echarts.init(chartDom.value)
  const xdata: any = []
  const ydata: any = []
  const ydata2: any = []
  const maxValue = Math.max(...dataRight.value.map((item: any) => Number(item.count)));
  dataRight.value.forEach((item: any) => {
    xdata.push(item.txt)
    ydata.push({
      value: item.count,
      rate: item.rate,
      total_amount: item.total_amount,
      name: item.txt
    })
    ydata2.push(maxValue + 20)
  })
  const option = {
    xAxis: [
      {
        type: 'category',
        data: xdata,
        axisLabel: {
          // 设置x轴的文字的样式
          textStyle: {
            show: true,
            color: "#ffffff",
            fontSize: $util.fontSize(14),
          },
          margin: $util.fontSize(18),
        },
        axisLine: {
          show: true, // 把x轴从实线变成虚线
          lineStyle: {
            // 设置x轴线条样式的颜色
            color: "#2F5A8D",
            width: 1,
            type: "solid",
          },
        },
        splitLine: {
          //去除网格线
          show: false,
          lineStyle: {
            color: "rgba(255,255,255,0.15)",
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
          },
        },
        axisTick: {
          show: false, // 新增：隐藏x轴刻度线
        },
        scale: true, // 设置数据自动缩放，要不然数据多的话就堆一块了
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: "人数",
        nameGap: $util.fontSize(25),
        nameTextStyle: {
          color: "#FFFFFF",
          fontSize: $util.fontSize(14),
          nameLocation: "start",
          padding: [0, 0, 0, -$util.fontSize(34),], // 调整文字的位置，让文字和轴线之间有间距，防止文字和轴线重叠
        },
        minInterval: 1, // 自动计算的坐标轴最小间隔大小。设置成1保证坐标轴分割刻度显示成整数
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: "rgba(255,255,255,0.15)",
          }
        },
        axisLabel: {
          formatter: '{value}',
          // 设置x轴的文字的样式
          textStyle: {
            show: true,
            color: "#ffffff",
            fontSize: $util.fontSize(14),
          },
          margin: $util.fontSize(5),
        },
      }
    ],
    grid: {
      left: '4%',
      right: '4%',
      bottom: '6%',
      top: '21%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      showContent: true, // 是否显示提示框浮层
      backgroundColor: "#fff",
      extraCssText: "box-shadow: 0px 9px 28px 1px rgba(0,0,0,0.05);",
      formatter: function (obj: any) {
        return (
          `<span style='font-size: 12px;font-family: Source Han Sans CN, Source Han Sans CN;font-weight: bold;color:#000000;width:100%;text-align: center;margin-bottom:4px;display:inline-block;text-align: left;'>${ydata[obj[0].dataIndex].name}</span>` +
          `<br>` + `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
            <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">总人数：</span></span>
            <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${ydata[obj[0].dataIndex].value}</span>
          </span>` + `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
            <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">总金额：</span></span>
            <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${ydata[obj[0].dataIndex].total_amount}元</span>
          </span>` + `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
            <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">占比：</span></span>
            <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${ydata[obj[0].dataIndex].rate}%</span>
          </span>`
        )
      },
    },
    series: [
      {
        name: '',
        type: 'pictorialBar', // 象形柱图
        barWidth: $util.fontSize(34),
        symbol: 'triangle', // 图形类型
        z: 100, // 象形柱图组件的所有图形的z值
        tooltip: {
          show: true,
        },
        label: {
          show: true,
          position: 'top',
          color: '#007FFF',
          fontSize: $util.fontSize(14),
          fontWeight: 'bold',
          formatter: function (params: any) {
            return params.data.rate + '%';
          }
        },
        itemStyle: { // 图形样式,若想给每个柱图都设置单独的颜色则需要单独在data中设置
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1, color: '#007FFF' // 100% 处的颜色
            }, {
              offset: 0, color: '#007FFF'// 0% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        barCategoryGap: "20%", // 同一系列的柱间距离
        smooth: true,
        data: ydata
      },
      {
        type: 'bar',
        barWidth: $util.fontSize(34),
        tooltip: { show: false }, // 提示框
        itemStyle: {
          color: 'rgba(64,166,255,0.2)' // rgba第四个参数可设置透明度
        },
        z: 10,
        barCategoryGap: "20%", // 同一系列的柱间距离
        smooth: true,
        data: ydata2
      },
    ]
  }
  myChart.setOption(option)
}
//重新加载图表
const reloadChart = async () => {
  disposeChart()
  getCharts()
}
const disposeChart = () => {
  if (myChart) {
    myChart.dispose()
  }
}
onMounted(async () => {
  getCharts()
  window.addEventListener('resize', () => {
    setTimeout(async () => {
      await reloadChart()
    }, 500);
  })
})
defineExpose({ getList })
</script>
<style scoped lang="scss">
.screenLeftTwo {
  margin-bottom: 20px;

  .contentBox {
    background: rgba(7, 77, 183, 0.16);
    border-radius: 10px;
    margin-top: 20px;
    height: 280px;
    width: 100%;

    #chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>